<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style type="text/css">
div{width:200px; height:200px; background-color:red; position:absolute; left:0; top:100px;}
</style>
</head>
<body>
<input id="btn1" type="button" value="右"/>
<input id="btn2" type="button" value="左"/>
<input id="btn3" type="button" value="下"/>
<input id="btn4" type="button" value="上"/>
<div id="div1"></div>
<script src="myJS.js"></script>
<script>
var oDiv=document.getElementById("div1");
document.getElementById("btn1").onclick = function (){
	doMove(oDiv,600,5,"left",function (){alert(1)})
}
document.getElementById("btn2").onclick = function (){
	doMove(oDiv,0,5,"left")
}
document.getElementById("btn3").onclick = function (){
	doMove(oDiv,400,5,"top")
}
document.getElementById("btn4").onclick = function (){
	doMove(oDiv,100,5,"top")
}
function doMove(obj,end,step,attr,endFn){
	step = parseInt(getStyle(obj,attr))<end ? step : -step;
	clearInterval(obj.timer);
	obj.timer = setInterval(function (){
		var nextPlace = parseInt(getStyle(obj,attr)) + step;
		if(nextPlace>=end&&step>0||nextPlace<=end&&step<0){
			nextPlace=end;
		}
		obj.style[attr] = nextPlace + "px";
		if(parseInt(getStyle(obj,attr))===end){
			clearInterval(obj.timer);
			//if(endFn){endFn();}
			endFn && endFn();
		}
	},30);
}
</script>
</body>
</html>
